<template>
	<view class="content"  :style="{height:windowHeight+'px'}">
		<view class="map">
			<!-- <img src="static/icon/home.png" alt=""> -->
			<map :latitude="latitude" :longitude="longitude" 	class="mapDiv"></map>
			<view class="searchDiv">
				<icon type="search" class="icon" size="26"/>
				<input class="uni-input" confirm-type="search" placeholder="请输入站点名称" style="z-index: 99;background-color: white;"/>
			</view>
		</view>
		<view class="menu">
			<view class="blex">
				<swiper class="swiper">
				  <!-- 使用 v-for 循环渲染每个子数组 -->
				  <swiper-item v-for="(items, swiperIndex) in menuLists" :key="swiperIndex" class="swiper-item">
				    <view class="swiper-item uni-bg-red">
				      <uni-grid :column="4" :highlight="true"  :show-border="false"  class="no-border">
				        <!-- 使用 v-for 渲染每个菜单项 -->
				        <uni-grid-item v-for="(item, index) in items" :index="index" :key="index" >
							 <navigator :url="'/' + item.url" open-type="navigate" hover-class="navigator-hover"> <!-- 替换成你要跳转的页面路径 -->
							  <view class="grid-item-box" style="background-color: #fff;">
								<img :src="item.icon" alt="" sizes="" srcset="">
								<text class="text">{{ item.title }}</text>
							  </view>
							</navigator>
				        </uni-grid-item>
				      </uni-grid>
				    </view>
				  </swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		
		data() {
			return {
				latitude: 39.915,
				longitude: 116.404,
				menuList: [
					{
						id:1,
						title:'我的任务',
						icon:'static/menu/renwu.png',
						url:'pages/myrw/index'
					},
					{
						id:2,
						title:'定期巡检',
						icon:'static/menu/xunjian.png',
						url:'pages/xunjian/index'
					},
					{
						id:3,
						title:'站点管理',
						icon:'static/menu/zhandian.png',
						url:'pages/zhandian/index'
					},
					{
						id:4,
						title:'告警查询',
						icon:'static/menu/gaojing.png',
						url:'pages/waring/index'
					},
					{
						id:5,
						title:'任务管理',
						icon:'static/menu/renwu1.png',
						url:'pages/renwu/index'
					},
					{
						id:6,
						title:'在线报修',
						icon:'static/menu/baoxiu.png',
						url:'pages/baoxiu/index'
					},
					{
						id:7,
						title:'用车登记',
						icon:'static/menu/yongche.png',
						url:'pages/usercar/index'
					},
					{
						id:8,
						title:'成本上报',
						icon:'static/menu/chengben.png',
						url:'pages/chengben/index'
					},
					{
						id:9,
						title:'采购管理',
						icon:'static/menu/caigou.png',
						url:'pages/caigou/index'
					},
					{
						id:10,
						title:'库存管理',
						icon:'static/menu/kucun.png',
						url:'pages/kucun/index'
					},
				
				],
				markers: [{
					latitude: 39.915,
					longitude: 116.404,
					name: 'Marker'
				}],
				windowHeight:700,
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
		
			this.windowHeight = sysInfo.windowHeight;
		},
		 computed: {
		   // 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		   menuLists() {
		     const itemsPerSwiperItem = 8; // 每个 swiper-item 最多显示的菜单项数量
		     const numSwiperItems = Math.ceil(this.menuList.length / itemsPerSwiperItem); // 计算需要的 swiper-item 数量
		 
		     // 使用循环将 menuList 数据分割成每个 swiper-item 中的子数组
		     const menuLists = [];
		     for (let i = 0; i < numSwiperItems; i++) {
		       const start = i * itemsPerSwiperItem;
		       const end = start + itemsPerSwiperItem;
		       menuLists.push(this.menuList.slice(start, end));
		     }
		 
		     return menuLists;
		   },
		 },
		methods: {
			change(e) {
				uni.showToast({
					title: `点击第个宫格`,
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.content {
		width: 100%;
		.map{
			width: 100%;
			height: 72%;
			position: relative;
			.mapDiv{
				width: 100%;
				height: 90%;
				.amap-copyright{
					display: none !important;
				}
			}
			.searchDiv{
				width: 100%;
				height: 10%;
				position: relative;
				.icon{
					position: absolute;
					right: 2rem;
					top: 0.7rem;
				}
			}
			.uni-input{
				 border-radius: 30px;
				  border: 1px solid #ccc;
				  padding: 10px 40px 10px 10px;
				  margin: 0.5rem;
			}
		}
		.menu{
			width: 100%;
			height: 28%;
			    display: flex;
			    align-items: center;
			    justify-content: center;
				.blex{
					width: 100%;
					height: 95%;
					.swiper{
						width: 100%;
						height: 100%;
						/* 去掉边框 */
						.swiper-item {
						  border: none;
						}
						.text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 1rem;
							color: #222222;
						}
					
					}
					
				}
					
				
					.uni-grid{
					    display: flex;
					    flex-direction: row;
					    flex-wrap: wrap;
					    justify-content: center;
					    align-items: center;
					}
				
					.grid-dynamic-box {
						margin-bottom: 15px;
					}
				
					.grid-item-box {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 1rem 0;
						img{
							width: 3rem;
						}
					}
				
					.grid-item-box-row {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 1rem 0;
					}
				
		}
	
	}


	
</style>
